<template>
  <div>
    <ul v-for="(item,index) in cart" :key="index">
      <li>
        <img :src="item.img" alt />
        <span>价钱：{{ item.money }}</span>
        <span>{{ index }}</span>
        <span @click="add(item,index)">添加</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { CART_DATA } from "../store/types";
export default {
  data() {
    return {
      cart: [],
    };
  },
  mounted() {
    let url = "http://127.0.0.1:8080/data/cart.json";
    this.$axios.get(url).then((ret) => {
      //   console.log(ret.data);
      this.cart = ret.data;
    });
  },
  methods: {
    add(item, index) {
        // console.log(item, index);
      this.$store.dispatch(CART_DATA, item);
      this.$router.push("/cart");
      //   console.log(item, "tijiao");
    },
  },
};
</script>

<style lang="scss" scoped>
ul {
  li {
    width: 100%;
    // height: 100px;
    background: rgb(165, 148, 165);
    img {
      width: 50px;
      height: 50px;
    }
    span {
      //   background: rgb(56, 119, 179);
      margin: 0 20px;
    }
  }
}
</style>